<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <link href="{$Think.config.RESOURCEURL}wx_assets/dist/gmu.css{$Think.config.RESOURCE_VER}" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/dist/gmu.min.js{$Think.config.RESOURCE_VER}"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/product/m_city.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/merchant/js/z.citys.js{$Think.config.RESOURCE_VER}"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/personCenter/js/mediaQuery.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?ak=rUoiQA0wNIKkKPYRIynPI7BmHh4v9GPl&v=2.0"></script>
    <title>{$systemName}</title>
    <style>
        @font-face {
            font-family: 'iconfont';  /* project id 201523 */
            src: url('//at.alicdn.com/t/font_ng0hb2bnfvibe29.eot');
            src: url('//at.alicdn.com/t/font_ng0hb2bnfvibe29.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_ng0hb2bnfvibe29.woff') format('woff'),
            url('//at.alicdn.com/t/font_ng0hb2bnfvibe29.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_ng0hb2bnfvibe29.svg#iconfont') format('svg');
        }
        .iconfont{
            font-family:iconfont;
        }
        body{
            background-color:#F0EFF4;
            font-size:14px;
        }
        .store_info{
            margin:10px 0;
            background-color:white;
            padding-left:10px;
        }
        .store_info>div{
            border-bottom:1px solid #E5E5E5;
        }
        .store_info>div:last-child{
            border:0;
        }
        .store_info>div>label{
            display: inline-block;
            width: 60px;
            line-height: 45px;
            vertical-align: top;
        }
        .store_info>div>input,.store_info>div .address{
            width: -webkit-calc(100% - 60px);
            padding: 5px;
            box-sizing: border-box;
            height: 46px;
        }
        .address{
            position:relative;
            display:inline-block;
            height:auto;
        }
        .address input{
            line-height: 30px;
            width: 100%;
            height: 100%;
        }
        .address .cityselect{
            display: inline-block;
            padding: 0 5px;
            width: -webkit-calc(50% - 10px);
            box-sizing:border-box;
            height: 30px;
            text-align: left;
            position:relative;
            line-height: 20px;
            border:1px solid #ccc;
            margin-bottom:10px;
        }
        .address .cityselect:nth-child(odd){
            margin-right:20px;
        }
        .address .cityselect>i{
            position: absolute;
            right: 10px;
            top: 5px;
            color: #ccc;
        }
        .address select{
            padding: 0;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            height:30px;
            margin-right: 6px;
            opacity: 0;
        }
        .address textarea{
            resize: none;
            border: 1px solid #ccc;
            width: 100%;
            box-sizing: border-box;
            height:85px;
        }
        .service,.store_pic{
            padding-bottom:10px;
        }
        .service li{
            display: inline-block;
            min-width: 50px;
            padding: 3px 5px;
            text-align: center;
            border-radius: 4px;
            color: #ccc;
            border: 1px solid #ccc;
            margin: 5px;
        }
        .service li.current{
            background-color: #1BACFD;
            border-color: #1BACFD;
            color: white;
        }
        .store_pic ul{
            overflow:hidden;
        }
        .store_pic li{
            width: 1.6rem;
            margin: 10px;
            height: 1.14rem;
            position: relative;
            box-sizing: border-box;
            float:left;
        }
        .store_pic li .imgDiv{
            overflow: hidden;
            position: relative;
            height: 100%;
        }
        .store_pic li img{
            max-width: 100%;
            position: absolute;
            top: 50%;
            transform: translate(0,-50%);
            -webkit-transform: translate(0,-50%);
        }
        .store_pic li .del{
            position: absolute;
            right: 0;
            top: 0;
            font-size: 16px;
            display:block;
            transform: translate(50%,-50%);
            -webkit-transform: translate(50%,-50%);
        }
        .store_pic li.add{
            background-color:#F4F4F4;
            border:1px solid #DCDCDC;
            box-sizing:border-box;
        }
        .store_pic li.add a{
            position: absolute;
            width:0.6rem;
            height:0.6rem;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            border:1px solid #DCDCDC;
        }
        .store_pic li.add a:before{
            content:"";
            width:50%;
            display:block;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            border-top:2px solid #DCDCDC;
        }
        .store_pic li.add a:after{
            content:"";
            height:50%;
            display:block;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            border-left:2px solid #DCDCDC;
        }
        .menu{
            margin-top:20px;
            padding:0 10px;
        }
        .menu a{
            display:block;
            border-radius:4px;
            padding:10px 0;
            margin:10px 0;
            text-align: center;
            background-color:white;
            color:#333;
        }
        .menu a:first-child{
            background-color:#1BACFD;
            color:white;
        }
        .menu a.disabeld{
            background-color:#ccc;
            color:white;
        }
        .iconfont{
            font-family:iconfont;
        }
        #closeLocation{
            position: fixed;
            top: 10px;
            right: 10px;
            font-size: 21px;
            color: black;
            z-index: 99;
        }
        .anchorBL{
            bottom:10px;
        }
        #saveLocation{
            height:30px;
            line-height:30px;
            background-color:#1BACFD;
            color:white;
            border-radius:4px;
            text-align:center;
            margin:10px;
        }
        #location{
            display: block;
            margin-right: 5px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div style="display:none">
    <a class="iconfont" id="closeLocation">&#xe6a1;</a>
    <div id="allmap" style="height:100%"></div>
    <div style="position:fixed;bottom:0;width:100%;background-color: white;">
        <a style="display:block;width:100%;" id="saveLocation">保存</a>
    </div>
</div>
    <div class="store_info">
        <div>
            <label>自提点名称:</label><input type="text" id="name" placeholder="请输入自提点名称" value="{$storeInfo['name']}">
        </div>
        <div>
            <label>自提点电话:</label><input type="text" id="phone" placeholder="请输入自提点电话" value="{$storeInfo['phone']}"/>
        </div>
        <div style="padding:10px 0">
            <label>自提点地址:</label>
            <div class="address" id="m_cityed">
                <div class="cityselect province"><input id="province" type="text" placeholder="选择省份"/><i class="iconfont">&#xe6d7;</i><select name="province" class="p"></select></div>
                <div class="cityselect city"><input id="city" type="text" placeholder="选择城市"/><i class="iconfont">&#xe6d7;</i><select name="city" class="c"></select></div>
                <div class="cityselect area"><input id="area" type="text"/><i class="iconfont">&#xe6d7;</i><select name="area" class="a"></select></div>
                <textarea id="address" placeholder="街道详细地址">{$storeInfo['address']}</textarea>
            </div>
            <if condition="$storeInfo.longitude eq '' or $storeInfo.latitude eq ''">
                <a id="location"><i class="iconfont" style="color:#1BACFD;font-size:20px;margin-right: 5px;">&#xe614;</i>
                    <span>点击获取精确位置</span>
                    <i class="iconfont" style="float: right;font-size: 15px;top: 4px;position: relative;color: #ccc;">&#xe675;</i>
                </a>
                <else/>
                <a id="location"><i class="iconfont" style="color:#1BACFD;font-size:20px;margin-right: 5px;">&#xe614;</i>
                    <span>经度：{$storeInfo.longitude},纬度：{$storeInfo.latitude}</span>
                    <i class="iconfont" style="float: right;font-size: 15px;top: 4px;position: relative;color: #ccc;">&#xe675;</i>
                </a>
            </if>
        </div>
        <div class="service">
            <label>服务项目</label>
            <ul>
                <volist name="serviceList" id="service">
                    <if condition="$service['checked'] eq '1'">
                        <li class="current" data-id="{$service.id}">{$service.name}</li>
                        <else/>
                        <li data-id="{$service.id}">{$service.name}</li>
                    </if>
                </volist>
            </ul>
        </div>
        <div class="store_pic">
            <label>上传图片</label>
            <ul>
                <volist name="storeInfo['picUrl1']" id="picUrl">
                    <li>
                        <div class="imgDiv">
                            <img src="{$picUrl['picUrl']}"/>
                        </div>
                        <a class="del iconfont" onclick="login.delImg(this)">&#xe6a1;</a>
                    </li>
                </volist>

                <li class="add">
                    <a></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="menu">
        <a id="save">确定</a>
        <a id="deleted">删除</a>
        <a id="cancel">取消</a>
    </div>
</body>
<script>
    var baseUrl = '{$Think.config.SERVER_HOST}';
    var hrefPath = baseUrl+'call.html?customerId={$customerId}';
    var lng = null;
    var lat = null;
    var longitude = null;
    var latitude = null;
    var login = {
        init:function(){
            var province = "{$storeInfo['province']}";
            var city = "{$storeInfo['city']}";
            var country = "{$storeInfo['country']}";
            $('#m_cityed').citys({"province":province,"city":city,"area":country});
            this._initEvent();
        },
        _initEvent:function(){
            var me = this;
            $(".service li").click(function(){
               if($(this).hasClass('current')){
                   $(this).removeClass('current');
               }else{
                   $(this).addClass('current');
               }
            });
            $("#saveLocation").click(function(){
                $(".map").hide();
                me.longitude=lng;
                me.latitude=lat;
                if(lng&&lat){
                    $("#location span").text("经度："+lng+",纬度："+lat);
                }
                $("body,html").css("overflow","auto");
                $("body,html").css("height","auto");
                $("#allmap").parent().hide();
            });
            $("#closeLocation").click(function(){
                $(".map").hide();
                $("body,html").css("overflow","auto");
                $("body,html").css("height","auto");
                $("#allmap").parent().hide();
                lng = null;
                lat= null;
            });
            $("#location").click(function(){
                var address = $("#address").val();
                var province = $("#province").val();
                var city = $("#city").val();
                var area = $("#area").val()||"";
                if(!address||!province||!city){
                    $.util.alert("地址不完整！");
                    return;
                }
                address = province+city+area+address;
                local.search(address);
                $("body,html").css("height","100%");
                $("body,html").css("overflow","hidden");
                $("#allmap").parent().show().css({"position":"fiexed","height":"100%","background-color":"white"});

            });
            $('#cancel').click(function(){
                location.href = '{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=merchant&method=index';
            });
            $("#deleted").click(function(){
                $.util.ok("确定删除该自提点吗？",function(){
                    var params = {
                        "id":"{$storeInfo.id}"
                    };
                    $.util.pageLoading.show();
                    $.req.get("call.json?customerId={$customerId}&module=merchant&method=deletedStore", {
                        params: params
                    }, function (data) {
                        if(data.code==0){
                            location.href = '{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=merchant&method=storeIndex';
                        }else{
                            $.util.alert(data.msg);
                        }
                        $.util.pageLoading.hide();
                    })
                });
            });
            $("#save").click(function() {
                if($(this).hasClass("disabeld")){return;}
                var name = $("#name").val();
                var phone = $("#phone").val();
                var picUrl = new Array(0);
                $(".store_pic img").each(function(){
                    var pic = {
                        "picUrl":$(this).attr("src")
                    };
                    picUrl.push(pic);
                });
                var address = $("#address").val();
                var province = $("#province").val();
                var city = $("#city").val();
                var area = $("#area").val();
                picUrl = JSON.stringify(picUrl);
                if (!name || !phone||!picUrl||!province||!city||!address) {
                    $.util.alert("信息不完整!");
                    return;
                }
                var service = new Array(0);
                $(".service li.current").each(function(){
                    service.push($(this).data("id"));
                });
                service=service.join(",");
                var params = {
                    "name":name,
                    "phone":phone,
                    "picUrl":picUrl,
                    "service":service,
                    "vid":"{$vid}",
                    "address":address,
                    "province":province,
                    "city":city,
                    "area":area,
                    "lng":me.longitude,
                    "lat":me.latitude,
                    "id":"{$storeInfo.id}"
                };
                $.util.pageLoading.show();
                $.req.get("call.json?customerId={$customerId}&module=merchant&method=saveStore", {
                    params: params
                }, function (data) {
                    if(data.code==0){
                        $.util.showMsg("自提点保存成功",function(){
                            location.href = '{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=merchant&method=storeIndex';
                        });
                    }else{
                        $.util.alert(data.msg);
                    }
                    $.util.pageLoading.hide();
                });
            });
            $(".add").click(function(){
                var upload = $(this);
                wx_share.uploadImage(function(data){
                    var path = data.path;
                    var str = ' <li><div class="imgDiv">\
                            <img src="'+path+'"/>\
                    </div><a class="del iconfont" onclick="login.delImg(this)">&#xe6a1;</a></li>';
                    upload.before(str);
                });
            });
        },
        delImg:function(curl){
            $(curl).parents("li").remove();
        }
    };

    login.init();
</script>
<script type="text/javascript">
    var lng = null;
    var lat = null;
    // 百度地图API功能
    var marker=null;
    var map = new BMap.Map("allmap");
    var local = new BMap.LocalSearch(map, {
        renderOptions:{map: map}
    });
    var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true
    });
    map.addControl(navigationControl);
    //         启用地图惯性拖拽，默认禁用
    map.enableDragging();
    map.addEventListener("touchend",function(e){
        if(Math.abs(e.pixel.x-x)<5&& Math.abs(e.pixel.y-y)<5){
            lng = e.point.lng;
            lat= e.point.lat;
            var new_point = new BMap.Point(lng, lat);
            map.clearOverlays();
            marker = new BMap.Marker(new_point);  // 创建标注
            map.addOverlay(marker);
        }
    });
    map.addEventListener("touchstart",function(e){
        x = e.pixel.x;
        y = e.pixel.y;
    });
    map.enableScrollWheelZoom();
</script>
<script>
    wx_share.init({
        "pkg":{
            "appId": '{$pkg.appId}',
            "timestamp": '{$pkg.timestamp}',
            "nonceStr": '{$pkg.nonceStr}',
            "signature": '{$pkg.signature}'
        },
        hide:1
    });
</script>
</html>